<template>
  <section>
    <table border="0" width="100%" style="border-spacing: 0;border-collapse: collapse;">
      <tr>
        <td style="font-size:18px;">零售药品列表</td>
        <td></td>
        <td style="text-align:right;vertical-align: top;">
          <el-form :inline="true">
            <el-form-item>
              <el-button @click="addRetail">零售药品</el-button>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="form.date" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" circle icon="el-icon-search" @click="getData(-1)"></el-button>
            </el-form-item>
          </el-form>
        </td>
      </tr>
    </table>
    <div class="retail_box">
      <el-col v-for="(i,index) in tableList" :key="index" :xs="12" :sm="12" :md="12" :lg="8" :xl="6" class="reserve-user-list" style="padding-left: 10px; padding-right: 10px;">
        <div class="card-box">
          <div class="card-nr">
            <div style="overflow: hidden;">
              <h4 class="overflow-omit">零售药品</h4>
              <p class="overflow-omit">收费日期：{{i.gmtCreate}}</p>
              <p class="overflow-omit">收费人员：{{i.hpMember.memberName}}</p>
              <!-- <div style="margin-top:5px;" class="overflow-omit">检验：{{item.checkDesc}}</div>
              <div style="margin-top:5px;" class="overflow-omit">{{item.checkStatusDesc}} / 等候{{item.waitTime}}分钟 / {{item.payDesc}}</div>
              <div style="margin-top:5px;" class="overflow-omit">开单医生：{{item.doctorName}}（{{item.diagnosisTypeDesc}}）</div> -->
            </div>
          </div>
          <div class="card-footer">
            <div @click="getDetail(i.orderId)">查看详情 ￥{{i.realityMoney-i.refundMoney | changeMoneyToTwo}}</div>
          </div>
        </div>
      </el-col>
    </div>
  </section>
</template>
<script>
export default {
  name: "retailIndex",
  data() {
    return {
      tableList: [],
      form: {
        date: ""
      }
    };
  },
  mounted() {
    this.getData();
  },
  activated() {
    this.getData();
  },
  methods: {
    getData() {
      let th = this;
      th.$api
        .getOrder({
          source: 2,
          status: 2,
          pageNum: 1,
          pageSize: 10,
          patientId: ""
        })
        .then(res => {
          if (res.executed) {
            th.tableList = res.dataBody.list;
          }
        });
    },
    addRetail() {
      let th = this;
      th.$router.push({
        path: "/page/addRetail"
      });
    },
    getDetail(id) {
      let th = this;
      let j;
      j = {
        id: th.jiaMi(id)
      };
      th.$router.push({ path: "/page/retailDetail", query: th.getUrlToken(j) });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../_css/reserve.scss";
.reserve-user-list {
  margin-right: 2%;
  .card-nr {
    background: linear-gradient(to bottom, #458ece 0, #4185c1 100%);
  }
}
</style>